<template>
	<view class="box">
		<view class="notNetWarn" v-show="isNet">
			<span class="warn_left">!</span><span class="warn_right">当前网络不可用，请检查你的网络设置</span>
		</view>
		<view class="version">
		  <!-- 修改：当前仓号显示，直接显示ID -->
		  <div v-if="operationSiteId !== 0">当前仓号:{{displaySiteId}}</div>
		  <!-- 切换仓库按钮 -->
		  <view class="switch-site" 
				@click="showSiteList = !showSiteList">
			切换仓库
		  </view>
		  <!-- 根据用户类型显示不同仓库列表 - 过滤掉0仓 -->
		  <view class="site-list" v-if="showSiteList">
			<!-- 管理员显示所有仓库（过滤掉0仓） -->
			<view v-if="isAdmin" class="site-item" 
				  v-for="(site, index) in filteredSites" 
				  :key="site"
				  @click="changeSite(site)">
			  <!-- 修改：直接显示仓库ID -->
			  仓库{{getDisplaySiteNumber(site)}}
			</view>
			<!-- 普通员工只显示自己的仓库（确保不是0仓） -->
			<view v-else-if="operationSiteId !== 0" class="site-item" @click="changeSite(displaySiteId)">
			  {{displaySiteId}}号仓
			</view>
		  </view>
		  <view class="logout" @click="logout">
			退出登录
		  </view>
		</view>
		
		<!-- 操作选择 -->
		<view class="btns column-around" :style="this.moveConsoleUp">
			<button class="button" :class="{choosed: item.choose}" v-for='(item,index) in list' :key="index"
				v-show="item.isShow"  @click="handleClick(item,index)"
				:style="{backgroundColor: item.backgroundColor}"><span :data-item="item" class="text">{{item.text}}</span></button>
		</view>
		
		<u-modal v-model="isModal" @confirm="confirm" ref="uModal" :content="content"
			:show-cancel-button="true"></u-modal>
	</view>
</template>
<script>
	import {
		getNowDate
	} from '@/getTime.js'
	import {
		mapGetters
	} from 'vuex'
	import Cookie from '@/utils/cookie.js'
	export default {
		data() {
			return {
				home: '首页',
				list: [{
					text: '查蛋',
					operation: 'CagenumberLay',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/cagenumber-layEggs/cagenumber-layEggs',
					choose: true
				}, {
					text: '放仔',
					operation: 'CagenumberPut',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/cagenumber-putEggs/cagenumber-putEggs',
					choose: false
				}, {
					text: '调仔',
					operation: 'CagenumberFeed',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/cagenumber-feedbirds/cagenumber-feedbirds',
					choose: false
				}, {
					text: '异常记录',
					operation: 'Expection',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/expectionHandle/expectionHandle',
					choose: false
				}, {
					text: '异常处理',
					operation: 'ExpectionHandle',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/expectionHandle/expectionHandle',
					choose: false
				}, {
					text: '放仔名单',
					operation: 'Putlist',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/putList/putList.vue',
					choose: false
				}, 
				{
					text: '当天数据',
					operation: 'Administrator',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/administrator/administrator',
					choose: false
				}, {
					text: '异常预警',
					operation: 'Warning',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/warning/warning',
					choose: false
				}
				,{
					text: '历史数据',
					operation: 'AdHistory',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/ad-history/ad-history',
					choose: false
				},{
					text: '详细数据',
					operation: 'AdDetail',
					isShow: true,
					isButtonDisabled: false,
					url: '/pages/ad-detail/ad-detail',
					choose: false
				},{
					text: '更改舍号',
					operation: 'HouseChange',
					isShow: Cookie.get('ROLE') === 'admin',
					isButtonDisabled: false,
					url: '/pages/house-change/house-change',
					choose: false
				},{
					text: '添加舍号',
					operation: 'HouseAdd',
					isShow: Cookie.get('ROLE') === 'admin',
					isButtonDisabled: false,
					url: '/pages/house-add/house-add',
					choose: false,
				}
				],
				isShowDownload: false,
				version: uni.getStorageSync('version'),
				// 记录下当前选中操作在list中的下标，默认为0
				index: 0,
				content: '确认登出吗？',
				isModal: false,
				showSiteList: false // 控制仓库列表显示/隐藏
			}
		},
		mounted(){
		    console.log('页面加载 - Vuex :', this.operationSiteId)
		    console.log('页面加载 - 本地存储 siteId:', uni.getStorageSync('siteId'))
		    console.log('页面加载 - Cookie siteId:', Cookie.get('siteId'))
		    console.log('页面加载 - 用户角色:', Cookie.get('ROLE'))
		    console.log('页面加载 - allSites:', this.allSites)
		},
		computed: {
			// 使用 Vuex 中的 allSites getter
			...mapGetters(['isNet', 'whipCount', 'stayCount', 'token', 'operationSiteId', 'allSites']),
			isAdmin() {
			  return Cookie.get('ROLE') === 'admin';
			},
			// 判断是否为普通员工
			isEmployee() {
			  return Cookie.get('ROLE') !== 'admin' && this.operationSiteId !== 0;
			},
			// 管理员 员工动态样式判断
			moveConsoleUp() {
				if(Cookie.get('ROLE') !== 'admin'){
					return {
						'margin-top': '50rpx'
					}
				}
			},
			// 修改：计算显示的仓号（直接使用实际仓号，不再加1）
			displaySiteId() {
				return this.operationSiteId;
			},
			// 新增：过滤掉0仓的仓库列表
			filteredSites() {
				return this.allSites.filter(site => site !== 0);
			}
		},
		methods: {
			handleClick(item, index) {
				this.list[this.index].choose = false
				this.index = index
				this.$store.commit('SETOPERATION', item.operation)
				item.choose = true
				
				// 触发NFC重新监听
				setTimeout(() => {
					if (this.$refs.operation && this.$refs.operation.testNFC) {
						this.$refs.operation.testNFC();
					}
				}, 300);
			},
			goShezhi() {
				uni.navigateTo({
					url: '/pages/shezhi/shezhi'
				})
			},
			logout(){
				this.isModal = true
			},
			confirm() {
				Cookie.remove('ROLE');
				this.$store.commit('REMOVE_TOKEN')
				uni.reLaunch({
					url:'/pages/login/login',
				})
				this.$Toast('登出成功');
			},
			// 修改：获取显示的仓库编号（直接返回实际仓库ID）
			getDisplaySiteNumber(siteId) {
				return siteId;
			},
			// 修改：切换仓库方法 - 不再进行加减1转换
			changeSite(siteId) {
			  console.log('切换仓号:', siteId);
			  
			  // 1. 更新Vuex状态 - 直接使用传递的ID
			  this.$store.commit('SETOPESITEID', siteId);
			  this.$store.commit('SET_SITE', siteId);
			  
			  // 2. 更新所有存储位置 - 直接使用传递的ID
			  Cookie.set('siteId', siteId);
			  uni.setStorageSync('siteId', siteId);
			  
			  this.showSiteList = false;
			  
			  // 3. 显示切换成功提示
			  const siteName = this.isAdmin ? `仓库${siteId}` : `${siteId}号仓`;
			  this.$Toast(`已切换到${siteName}`);
			  
			  // 4. 重置页面状态
			  setTimeout(() => {
				// 重置当前选中操作
				this.list.forEach((item, index) => {
					item.choose = index === 0; // 重置为第一个操作选中
				});
				this.index = 0;
				this.$store.commit('SETOPERATION', 'CagenumberLay');
				
				// 重新加载页面
				uni.reLaunch({
					url: '/pages/index/index'
				});
			  }, 500);
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* 切换仓库按钮样式 */
	.switch-site {
	  margin-top: 18.35rpx;
	  font-size: 22.02rpx;
	  color: #2979ff;
	  cursor: pointer;
	  text-align: center;
	  padding: 10rpx 0;
	}

	/* 仓库列表样式 - 使用左边代码的样式 */
	.site-list {
	  position: absolute;
	  top: 120rpx; /* 调整位置，确保在切换按钮下方显示 */
	  left: 20%;
	  width: 60%;
	  background-color: white;
	  border-radius: 8rpx;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	  z-index: 1000; /* 提高z-index确保显示在最上层 */
	  max-height: 400rpx; /* 设置最大高度 */
	  overflow-y: auto; /* 添加垂直滚动条 */
	}
	
	/* 可选：自定义滚动条样式 */
	.site-list::-webkit-scrollbar {
	  width: 6rpx;
	}
	
	.site-list::-webkit-scrollbar-track {
	  background: #f1f1f1;
	  border-radius: 3rpx;
	}
	
	.site-list::-webkit-scrollbar-thumb {
	  background: #c1c1c1;
	  border-radius: 3rpx;
	}
	
	.site-list::-webkit-scrollbar-thumb:hover {
	  background: #a8a8a8;
	}

	.site-item {
	  padding: 15rpx 0;
	  text-align: center;
	  border-bottom: 1px solid #f0f0f0;
	  font-size: 24rpx;
	  color: #333;
	}

	.site-item:last-child {
	  border-bottom: none;
	}

	.site-item:active {
	  background-color: #f5f5f5;
	}

	.box {
		width: 100%;
		height: 100%;
		text-align: center;
		position: relative;
		background-color: #e6f2ff;
		
		&.move-up {
			margin-top: 20rpx;
		}

		.notNetWarn {
			display: flex;
			width: 100%;
			height: 5vh;
			justify-content: center;
			background-color: #e8f0fa;

			.warn_left {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				color: #fff;
				margin-right: 16rpx;
				border-radius: 50%;
				background-color: #6a9bc3;
			}

			.warn_right {
				color: #4a7daa;
			}
		}

		.version {
			background-color: #d1e5f7;
			color: #4a7daa;
			width: 100%;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			font-size: 22.02rpx;
			margin-top: 10rpx;
			padding: 10rpx;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
			position: relative; /* 为绝对定位的子元素提供定位上下文 */
			
			.logout {
				margin-top: 4.59rpx;
				border: 1px solid #d1e5f7;
				width: 100%;
				height: 40rpx;
				border-radius: 72rpx;
				font-size: 22.02rpx;
				font-weight: bold;
				text-align: center;
				line-height: 40rpx;
				background-color: #4a7daa;
				color: white;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
			}

			.logout:active {
				transform: translateY(2rpx);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			}
		}

		.btns {
			margin-top: 40rpx;

			.button {
				display: flex;
				width: 100%;
				height: 100rpx;
				justify-content: space-around;	
				border-bottom: 1px solid #d1e5f7;
				align-items: center;
				transition: all 0.3s ease;
				background-color: #f0f8ff;

				&[disabled] {
					color: #8bacc0;
					cursor: not-allowed;
					background-color: #e6f2ff;
				}

				.iconfont {
					display: inline-block;
					width: 50%;
					height: 50%;
					line-height: 50.27rpx;
					font-size: 37.48rpx;
				}

				.text {
					font-weight: 700;
					font-size: 25.59rpx;
					color: #2c5c8f;
				}

				&.choosed {
					background-color: #d1e5f7;
					box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
				}
				
				&:active {
					background-color: #c0d8eb;
				}
			}
		}
	}
</style>